<template>
  <div class="home-container">
    <!-- 用户已登录时展示近期工作项目卡片 -->
    <!-- <div v-if="isLoggedIn" class="recent-projects" style="display: grid;">
      <h3>Recent Projects</h3>
      <br />
      <div class="project-cards">
        <div v-for="(project, index) in recentProjects" :key="index+project.id + '_' " class="project-card">
          <img :src="project.thumbnail" alt="Project Thumbnail" class="thumbnail" />
          <div class="card-content">
            <h4>{{ project.title }}</h4>
            <p>Author: {{ project.author }}</p>
            <p>Created: {{ project.createdAt }}</p>
            <p>Favorites: {{ project.favorites }}</p>
          </div>
        </div>
      </div>
    </div> -->
    <br v-if="isLoggedIn" />

    <!-- 搜索栏 -->
    <div class="search-bar" v-if="isLoggedIn">
      <input type="text" v-model="searchQuery" placeholder="Search for projects..." @input="filterProjects" />
    </div>

    <hr v-if="isLoggedIn" />

    <div class="public-projects">
      <h3 style="font-weight: bold;">Projects Square</h3>
      <br v-if="filteredProjects.length === 0" />
      <br v-if="filteredProjects.length === 0" />
      <br v-if="filteredProjects.length === 0" />
      <br v-if="filteredProjects.length === 0" />
      <br v-if="filteredProjects.length === 0" />
      <br v-if="filteredProjects.length === 0" />
      <a-empty :image="simpleImage" v-if="filteredProjects.length === 0" />
      <div class="project-cards">
        <div v-for="project in filteredProjects" :key="project.homeid" class="project-card"
          @click="visitPj(project.projectID,project.authorID||'')">
          <img :src="default_pj" class="thumbnail" />
          <div class="card-content">
            <h4>{{ project.projectName }}</h4>
            <span style="font-size: 16px; font-weight: bold;">Author: </span><span style="font-size: 16px;"> {{project.authorName }}</span><br />
            <span style="font-size: 16px; font-weight: bold;">Description: </span><span style="font-size: 16px;"> {{project.description }}</span><br />
            <span style="font-size: 16px; font-weight: bold;">Created: </span><span style="font-size: 16px;"> {{project.createdAt }}</span><br />
            <span style="font-size: 16px; font-weight: bold;">Favorites: </span><span style="font-size: 16px;"> {{project.favorites }}</span><br />
            <div @click.stop="star_pj(project)" class="star-footer" v-if="project.userID !== userStore.currentUser">
              <Icon name="stared" :W="16" :H="16" :Fill="'#f9e84f'"
                v-if="projectsStore.isStarred(project.userID, project.projectID)" />
              <Icon name="star" :W="16" :H="16" v-else />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import { useUserStore } from '../stores/userStore';
import { useRouter } from 'vue-router';
import { useProjectsStore } from '../stores/projectsStore';
import default_pj from '@/assets/images/default_pj_1.png';
import Icon from '../components/icons/Icon.vue'
import { formatDateTimeCN, dayjslib } from '../utils/DataTime.js';
import { useServer } from '@/components/ts/useServer';
import { Empty, message } from 'ant-design-vue';
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const { post } = useServer();
// 用户登录状态
const userStore = useUserStore();
const isLoggedIn = computed(() => userStore.isLoggedIn);
const projectsStore = useProjectsStore();
// 项目数据
const recentProjects = [
  {
    id: 1,
    title: 'Project A',
    thumbnail: 'https://via.placeholder.com/150',
    author: 'Author 1',
    createdAt: '2025-01-10',
    favorites: 12,
  },
  {
    id: 2,
    title: 'Project B',
    thumbnail: 'https://via.placeholder.com/150',
    author: 'Author 2',
    createdAt: '2025-01-12',
    favorites: 9,
  },
];

const publicProjects = [
  {
    id: 3,
    title: 'Public Project A',
    thumbnail: 'https://via.placeholder.com/150',
    author: 'Public Author 1',
    createdAt: '2025-01-08',
    favorites: 20,
  },
  {
    id: 4,
    title: 'Public Project B',
    thumbnail: 'https://via.placeholder.com/150',
    author: 'Public Author 2',
    createdAt: '2025-01-15',
    favorites: 30,
  },
  {
    id: 5,
    title: 'Public Project C',
    thumbnail: 'https://via.placeholder.com/150',
    author: 'Public Author 3',
    createdAt: '2025-01-18',
    favorites: 15,
  },
];

// 搜索框绑定的数据
const searchQuery = ref('');

const filteredProjects = computed(() => {
  return projectsStore.allprojects
    .filter(project => project.projectName.toLowerCase().includes(searchQuery.value.toLowerCase()) && project.isPublic === true)
    .map((project, index) => {
      return {
        ...project,
        homeid: `${Date.now()}_${index}`
      }
    })
})
const visitPj = (projectID: string, authorID: string) => {
  if (!isLoggedIn.value) {
    message.info('Please login first')
    return
  }
  projectsStore.visit_pj(projectID, authorID, userStore.currentUser as string, userStore.currentUserName as string);
}
onMounted(() => {
  projectsStore.fetchAllProjects();
  //console.log("projectsStore.allprojects:", projectsStore.allprojects);
})
function filterProjects(e: Event) {

  const value = (e.target as HTMLInputElement).value
  searchQuery.value = value
}
const star_pj = (pj: any) => {
  if (userStore.isvisitor) {
    return
  }
  if (!userStore.isLoggedIn) {
    message.info('Please login first')
    return
  }
  projectsStore.star(pj)
}
</script>

<style scoped lang="scss">
/* Home Page Styles */
.home-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow-y: auto;
  padding: 20px;
  background: radial-gradient(circle at center,
      rgba(173, 216, 230, 0)20%,
      rgba(142, 201, 220, 0.3) 80%,
      rgba(110, 197, 225, 0.684) 100%);
}

.search-bar {
  margin-bottom: 20px;
  text-align: center;

  input {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    max-width: 600px;
    border-radius: 8px;
    border: 1px solid #ccc;
    outline: none;

    &:focus {
      border-color: #007bff;
    }
  }
}

.project-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.project-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

  .thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
  }

  .card-content {
    padding: 15px;
  }

  h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  p {
    font-size: 14px;
    color: #555;

    &:last-child {
      font-weight: bold;
    }
  }

  .star-footer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

/* 如果没有登录的情况下 */
.recent-projects {
  display: none;

  h3 {
    text-align: center;
    color: #333;
  }
}

.public-projects h3 {
  text-align: center;
  color: #333;
  margin-top: 40px;
}
</style>
